// import { useEffect, useMemo, useState } from 'react';
// import './socket.css'
// import { AudioOutlined } from '@ant-design/icons';
// import { Input, Space } from 'antd';
// const { Search } = Input;
// import { io } from 'socket.io-client';
// import { useSearchParams, useNavigate } from 'react-router-dom';
// import dayjs from 'dayjs';

// // import {useNavigate} from 'react-router-dom'
// const suffix = (
//     <AudioOutlined
//         style={{
//             fontSize: 16,
//             color: '#1677ff',
//         }}
//     />
// );

// const onSearch = (value, _e, info) => console.log(info?.source, value);
// export default function Socket() {
//     const [searchParams] = useSearchParams();
//     const navigate = useNavigate();
//     const username = searchParams.get('username');

//     const [state, setState] = useState({
//         username: username,
//         userList: [],
//         targetUser: null,
//         msgText: '',
//         messageBox: {}
//     });

//     const messageList = useMemo(() => {
//         return state.messageBox[state.username] && state.targetUser
//            ? state.messageBox[state.username].filter((item) => {
//                 return (
//                     item.fromUsername === state.targetUser.username ||
//                     item.toUsername === state.targetUser.username
//                 );
//             })
//             : [];
//     }, [state.messageBox, state.username, state.targetUser]);

//     const socket = io('http://localhost:4000', {
//         query: {
//             username: state.username
//         }
//     });

//     const selectUser = (i) => {
//         setState(prevState => ({
//            ...prevState,
//             targetUser: i
//         }));
//         console.log(i.id, "iiii");
//     };

//     const sends = () => {
//         if (!state.msgText.length) return;
//         const newMessage = {
//             fromUsername: state.username,
//             toUsername: state.targetUser.username,
//             msg: state.msgText,
//             dataTime: new Date().getTime()
//         };
//         appendMessage(newMessage);
//         socket.emit('send', {
//             fromUsername: state.username,
//             targetId: state.targetUser.id,
//             msg: state.msgText
//         });
//         setState(prevState => ({
//            ...prevState,
//             msgText: ''
//         }));
//     };

//     useEffect(() => {
//         socket.on('online', (data) => {
//             setState(prevState => ({
//                ...prevState,
//                 userList: data.userList
//             }));
//         });

//         socket.on('receive', (data) => {
//             console.log(data, "data1111");
//             appendMessage(data);
//         });

//         socket.on('error', (err) => {
//             console.log(err);
//         });

//         return () => {
//             socket.off('online');
//             socket.off('receive');
//             socket.off('error');
//         };
//     }, [socket]);

//     const appendMessage = (data) => {
//         console.log(data, "data");
//         setState(prevState => {
//             const newMessageBox = { ...prevState.messageBox };
//             if (!newMessageBox[prevState.username]) {
//                 newMessageBox[prevState.username] = [];
//             }
//             newMessageBox[prevState.username].push(data);
//             return {
//                ...prevState,
//                 messageBox: newMessageBox
//             };
//         });
//         console.log(state.messageBox[state.username], "123");
//     };

//     return (
//         <div className='csc_div'>
//             <div className="cscsocketdiv">
//                 <div className="csc_title">
//                     <div >
//                         <span className="csc_socketkuai"></span>
//                         <span className='csc_socketspan1'>会话</span>
//                     </div>
//                     <hr className='csc_hr' />
//                 </div>
//                 <div className="csc_left">
//                     <div className='csc_sou'>
//                         <Space direction="vertical">
//                             <Search
//                                 placeholder="搜索会话"
//                                 onSearch={onSearch}
//                                 style={{
//                                     width: 250,
//                                 }}
//                             />
//                         </Space>  
//                     </div>
//                     {/* <div className='csc_huihualist' onClick={()=>{}}>
//                         <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E4%BC%9A%E8%AF%9D/p12.png" className='csc_imghui' alt="" />
//                         <span className='csc_spanhui'>笑看人生</span><br />
//                         <span className='csc_huihuanspan'>您好</span>
//                     </div>
//                     <div className='csc_huihualist'>
//                         <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E4%BC%9A%E8%AF%9D/p12.png" className='csc_imghui' alt="" />
//                         <span className='csc_spanhui'>笑看人生</span><br />
//                         <span className='csc_huihuanspan'>您好</span>
//                     </div>
//                     <div className='csc_huihualist'>
//                         <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E4%BC%9A%E8%AF%9D/p12.png" className='csc_imghui' alt="" />
//                         <span className='csc_spanhui'>笑看人生</span><br />
//                         <span className='csc_huihuanspan'>您好</span>
//                     </div>
//                     <div className='csc_huihualist'>
//                         <img src="https://cdn8.axureshop.com/demo2024/2296569/images/%E4%BC%9A%E8%AF%9D/p12.png" className='csc_imghui' alt="" />
//                         <span className='csc_spanhui'>笑看人生</span><br />
//                         <span className='csc_huihuanspan'>您好</span>
//                     </div> */}
                    
//                 </div>
//                 <div className="csc_center">
//                 <ul>
//                 {state.userList.map((i) => (
//                     i.username === state.username ? (
//                         <li key={i.id}></li>
//                     ) : (
//                         <li key={i.id}>
//                             <a href="javascript:;" onClick={() => selectUser(i)}>
//                                 {i.username}
//                             </a>
//                         </li>
//                     )
//                 ))}
//             </ul>
//             {state.targetUser && (
//                 <div>
//                     <h3>{state.targetUser.username}</h3>
//                     <input
//                         type="text"
//                         placeholder="输入内容"
//                         value={state.msgText}
//                         onChange={(e) =>
//                             setState(prevState => ({
//                                ...prevState,
//                                 msgText: e.target.value
//                             }))
//                         }
//                     />
//                     <button onClick={sends}>发送</button>
//                 </div>
//             )}
//             <div className="chatContent">
//                 {state.messageBox[state.username] && (
//                     <ul>
//                         {messageList.map((m, index) => (
//                             <li
//                                 key={index}
//                                 className={`${m.fromUsername === state.username ? 'sent' : 'received'}`}
//                             >
//                                 <div className="chatbox">
//                                     <p
//                                         style={{
//                                             textAlign: 'center',
//                                             fontSize: '12px',
//                                             color: '#ccc',
//                                             width: '100%',
//                                             height: '20px'
//                                         }}
//                                     >
//                                         {dayjs(new Date(m.dataTime)).format('YYYY-MM-DD:HH:mm')}
//                                     </p>
//                                     <br />
//                                     <span className="message-text">{m.msg}</span>
//                                 </div>
//                             </li>
//                         ))}
//                     </ul>
//                 )}
//             </div>
//                 </div>
                
//             </div>
//         </div>
//     )
// }